import React, { Component } from 'react';
import {
    WingBlank,
    WhiteSpace,
    NavBar,
    Icon,
    InputItem,
    Button,
    Toast,
} from 'antd-mobile';
import '../css/login.css';
import request from '../plugins/request';

class Login extends Component {
    constructor(props) {
        super(props);

        console.log('login component props', props);

        this.state = {
            username: '',
            password: '',
            usernameHasError: false,
            passwordHasError: false,
        };

        this.usernameOnChange = this.usernameOnChange.bind(this);
    }

    usernameOnChange(username) {
        if (username.length < 5 || username.length > 20) {
            this.setState({
                usernameHasError: true,
            });
        } else {
            this.setState({
                usernameHasError: false,
            });
        }

        this.setState({
            username,
        });
    }

    usernameOnErrorClick() {
        if (this.state.passwordHasError) {
            Toast.fail('用户名至少 5 位');
        }
    }

    passwordOnChange(password) {
        if (password.length < 6 || password.length > 20) {
            this.setState({
                passwordHasError: true,
            });
        } else {
            this.setState({
                passwordHasError: false,
            });
        }

        this.setState({
            password,
        });
    }

    passwordOnErrorClick() {
        console.log(12321);
        if (this.state.passwordHasError) {
            Toast.fail('密码至少 6 位');
        }
    }

    async login() {
        const { username, password } = this.state;
        const res = await request.post('/login', {
            username,
            password,
        });
        // 判断是否登录成功
        if (res.code !== 200) {
            return Toast.fail(res.message);
        }
        // 保存用户登录
        window.sessionStorage.setItem('user', JSON.stringify(res.data));
        // 跳转到登录前访问的页面
        // let redirect = '/blog/list';
        // if (this.props.location.state) {
        //     redirect = this.props.location.state.redirect || redirect;
        // }
        // this.props.history.push(redirect);
        // 跳转到博客列表页面
        this.props.history.push('/blog/list');
    }

    render() {
        return (
            <>
                {/* 顶部导航 */}
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={[
                        <Icon
                            key="0"
                            type="search"
                            style={{ marginRight: '16px' }}
                        />,
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >
                    网站博客
                </NavBar>

                <WingBlank>
                    <div className="login-box">
                        <h3>欢迎来到网站博客</h3>

                        <InputItem
                            placeholder="用户名"
                            error={this.state.usernameHasError}
                            onErrorClick={() => this.usernameOnErrorClick()}
                            value={this.state.username}
                            onChange={this.usernameOnChange}
                        />

                        <WhiteSpace />

                        <InputItem
                            type="password"
                            placeholder="密码"
                            error={this.state.passwordHasError}
                            onErrorClick={() => this.passwordOnErrorClick()}
                            value={this.state.password}
                            onChange={(value) => this.passwordOnChange(value)}
                        />

                        <WhiteSpace />

                        <Button
                            type="primary"
                            size="small"
                            onClick={() => this.login()}
                        >
                            登录
                        </Button>

                        <WhiteSpace />

                        <Button
                            type="ghost"
                            size="small"
                            onClick={() => this.props.history.push('/register')}
                        >
                            还没账号？去注册
                        </Button>
                    </div>
                </WingBlank>
            </>
        );
    }
}

export default Login;
